<!--  -->
<template>
  <div class="detialbox">
    <div class="detiallef">
      <h1>{{ titall }}</h1>
      <div class="detalcontent">海报新闻记者 丛萍 孙靓 申家鑫 济宁报道 <br><br>
        <img :src="imgurl">
        {{ concentde }}
      </div>
      <br>
      <br>
      <br>
      <Weis v-for="(item, index) in arr" :tita=item :srcdata=imgarr[index] :key="index + 9"></Weis>

    </div>
    <div class="detialrig">
      <Hotlist></Hotlist>
    </div>
  </div>
</template>

<script setup lang='js'>
import { ref, reactive ,watch } from 'vue'
import Hotlist from "../news/children/hotbang.vue";
import Weis from "../news/children/weis.vue";
import { navdata } from "@/stores/nav.js";
import { useRoute } from "vue-router";
const route = useRoute()
const data = navdata();

const titall = ref(data.detaldata[route.params.id - 1].titl)
const imgurl = ref(data.detaldata[route.params.id - 1].img)
const concentde = ref(data.detaldata[route.params.id - 1].cont)


const arr = ref(['现场画面：菲律宾擅拆中国在黄岩岛海域设置的漂浮屏障', '清华教授：调休不如适当增加和延长假期，逢周末还是顺延不要调休', '美财政部以涉伊为由制裁中国实体和个人 商务部：立即停止无理打压', '内蒙古一楼盘施工时挖出煤层，官方：无开采潜力，将按原计划建设', '港股开盘：恒指跌0.38％，恒生科技指数跌0.42％，理想汽车跌超4%', '注意看这只狗叫强简繁，前天把他逮捕了，他哭着求我不要用502胶水'])
const imgarr = ref(['https://i.weather.com.cn/images/mobile/mtqtj/2021/07/22/2021072215411762C98ECFC01588378C025861E16CB19E.jpg',
  'https://ts1.cn.mm.bing.net/th/id/R-C.93c52f146c177a9cb85eb443279e5997?rik=C977ixNFVgn7NA&riu=http%3a%2f%2fseopic.699pic.com%2fphoto%2f50053%2f7270.jpg_wh1200.jpg&ehk=XDEaB9Odv2uc7zcFD%2f5NiXhJAxFPSdHYncLPs2RI2k8%3d&risl=&pid=ImgRaw&r=0',
  'https://scpic.chinaz.net/files/pic/pic9/201812/zzpic15458.jpg',
  'https://ts1.cn.mm.bing.net/th/id/R-C.84a485f3c7c06e83ae2baa7cff5d732e?rik=glS0dIUfb6ZabQ&riu=http%3a%2f%2fimg3.redocn.com%2ftupian%2f20151113%2fbaidurentupiansucai_5311060.jpg&ehk=EpSMaWhcr0d0htJDCe9aSBspOtDqHUQoElDUFL4Ddss%3d&risl=&pid=ImgRaw&r=0',
  'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=843747388,1661619151&fm=253&gp=0.jpg',
  'https://ts1.cn.mm.bing.net/th/id/R-C.8ce37665e600c4d772934472f117f14e?rik=1qWQ%2bvGGajn8QQ&riu=http%3a%2f%2fwww.52gougouwang.com%2fuploads%2fdog%2f130104%2f1-130104125553R0.jpg&ehk=jYYbCuIfLOlagmm14hBuKvHVIe0EFBNhcmKk3ISfDqY%3d&risl=&pid=ImgRaw&r=0'])
</script>

<style  scoped>
.detalcontent {
  margin-top: 20px;
  line-height: 30px;
}

.detalcontent img {
  width: 100%;
}

.detialbox {
  width: 1000px;
  margin: 0 auto;
}

.detiallef {
  float: left;
  width: 68%;
}

.detialrig {
  float: left;
  width: 31%;
  margin-left: 1%;

}
</style>
